<template>
  <div class="main-container">
    <el-form ref="createForm" :model="taskData" :rules="rules">
      <!-- 基本配置 -->
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>基本配置</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 -->
        <div class="common-row row-between">
          <!-- 配置项 - 算法名称 -->
          <div class="common-item item-5">
            <label class="condition-label">参数名称</label>
            <el-form-item class="condition-input" prop="name">
              <el-input type="text" placeholder="请输入参数名称" v-model="taskData.name" />
            </el-form-item>
          </div>
          <!-- 配置项 - 模块选择 -->
          <div class="common-item item-5">
            <label class="condition-label">导出文件类型</label>
            <el-form-item class="condition-input" prop="exportFileType">
              <el-input type="text" placeholder="请输入导出文件类型" v-model="taskData.exportFileType" />
            </el-form-item>
          </div>  
        </div>
        <!-- 通用布局行 -->
        <div class="common-row">
          <div class="common-item item-10">
            <label class="condition-label">参数描述</label>
            <el-form-item class="condition-input" prop="des">
              <el-input v-model="taskData.des" maxlength="100" type="textarea" show-word-limit rows="4" resize="none" placeholder="请输入参数描述" />
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <!-- 算法上传 -->
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>参数配置</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 -->
        <div class="common-row">
          <div class="common-item item-5">
            <label class="condition-label">隐写标识</label>
            <el-form-item class="condition-input radio-input" prop="steganographyIdentify">
              <el-input type="text" placeholder="请输入隐写标识" v-model="taskData.steganographyIdentify" />
            </el-form-item>
          </div>
          <div class="common-item item-5">
            <label class="condition-label">编码参数</label>
            <el-form-item class="condition-input radio-input" prop="encodeParameter">
              <el-input type="text" placeholder="请输入编码参数" v-model="taskData.encodeParameter" />
            </el-form-item>
          </div>
        </div>
        <!-- 通用布局行 -->
        <div class="common-row">
          <div class="common-item item-5">
            <label class="condition-label">协议置乱参数</label>
            <el-form-item class="condition-input radio-input" prop="protocolScramblingParameter">
              <el-input type="text" placeholder="请输入协议置乱参数" v-model="taskData.protocolScramblingParameter" />
            </el-form-item>
          </div>
          <div class="common-item item-5">
            <label class="condition-label">载体置乱参数</label>
            <el-form-item class="condition-input radio-input" prop="carrierScramblingParameter">
              <el-input type="text" placeholder="请输入载体置乱参数" v-model="taskData.carrierScramblingParameter" />
            </el-form-item>
          </div>
        </div>
        <!-- 通用布局行 -->
        <div class="common-row">
          <div class="common-item item-5">
            <label class="condition-label">纠错编码参数</label>
            <el-form-item class="condition-input radio-input" prop="eccParameter">
              <el-input type="text" placeholder="请输入纠错编码参数" v-model="taskData.eccParameter" />
            </el-form-item>
          </div>
          <div class="common-item item-5">
            <label class="condition-label">嵌入率</label>
            <el-form-item class="condition-input radio-input" prop="embedRate">
              <el-input type="text" placeholder="请输入嵌入率" v-model="taskData.embedRate" />
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部的按钮 -->
    <div class="btn-groups">
      <button type="button" class="btn btn-normal" @click="back">取消</button>
      <button type="button" class="btn" @click="handleCreate">确定</button>
    </div>
    </el-form>
  </div>
</template>
<script setup>
import useAppStore from '@/stores/app';
import * as rule from '@/utils/rules.js';
import * as parameterApi from '@/api/parameter.js';
import { ElMessage } from 'element-plus';
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// ============> data
const router = useRouter();
const route = useRoute();
const isSet = ref(false);
const appStore = useAppStore();
const rules = {

};
const createForm = ref(null);
const taskData = ref({
  createFlag: false,
  id: null,
  name: '',
  des: '',
  // 隐写标识
  steganographyIdentify: '',
  // 编码参数
  encodeParameter: '',
  // 协议置乱参数
  protocolScramblingParameter: '',
  // 载体置乱参数
  carrierScramblingParameter: '',
  // 纠错编码参数
  eccParameter: '',
  // 导出文件类型
  exportFileType: '',
  // 嵌入率
  embedRate: ''
});


// ============> hooks
isSet.value = route.query && route.query.id ? true : false;
init();


// ============> method
function init(){
  if (!isSet.value) {
    return;
  }
  parameterApi.getParameterDetail({ id: route.query.id})
    .then(res => {
      // console.log(res)
      if (res){
        taskData.value = {...taskData.value, ...res};
        // console.log(taskData.value)
      } else {
        ElMessage.error('获取参数详情失败');
      }
    })
    .catch(err => {
      console.log(err)
      // ElMessage.error('获取参数详情失败');
    })
}
function handleCreate(){
  if (taskData.value.createFlag){
    ElMessage.warning('当前正在执行，请稍后');
    return;
  }
  let apiFn = isSet.value ? parameterApi.setParameter : parameterApi.createParameter;
  let loadingTxt = isSet.value ? '参数修改中...' : '参数创建中...';
  let successTxt = isSet.value ? '修改参数成功！' : '创建参数成功！';
  createForm.value.validate(valid => {
    if (valid){
      taskData.value.createFlag = true;
      appStore.openLoading(loadingTxt);
      apiFn(taskData.value)
        .then(res => {
          ElMessage.success(successTxt);
          router.replace({ name: 'parameterManage'});
        })
        .catch(err => {
          taskData.value.createFlag = false;
        })
        .finally(() => {
          taskData.value.createFlag = false;
          appStore.closeLoading();
        })
    } else {
      ElMessage.warning('提交信息验证失败，请核对后提交');
    }
  })
}
function back(){
  router.back();
}
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.row-between {
  justify-content: space-between;
}
.item-3 {
  width: 30%
}
.item-10 {
  width: 100%;
  height: auto;
  padding: 20px 0;
  .condition-label {
    width: 15%;
  }
  .condition-input {
    width: 80%;
  }
}
.item-10-spe {
  width: 100%;
  .condition-label {
    width: 15%;
  }
  .condition-input {
    width: 80%;
  }
  &::v-deep .el-form-item__content {
    align-items: center!important;
  }
}
.item-5 {
  width: 49%;
  height: auto;
  padding: 15px 0;
}
.upload {
  width: 100%;
  min-height: 120px;
  height: 120px;
  &::v-deep .el-upload {
    @include wh-100;
    // height: 100%!important;
    .el-upload-dragger {
      @include wh-100;
      border-color: var(--color-main);
      padding: 0;
      .upload-empty {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-gray-10);
        }
        .upload-des {
          color: var(--color-gray-10);
        }
      }
      .upload-content {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-main);
        }
        .upload-des {
          color: var(--color-main);
        }
      }
      .upload-content-files {
        @include wh-100;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        @include scrollBar;
        .upload-content-item {
          position: relative;
          width: 100px;
          height: 80px;
          margin: 15px 10px;
          border: 2px solid var(--color-main);
          border-radius: 8px;
          background-color: var(--color-main-9);
          @include flex-all-center;
          flex-direction: column;
          .upload-icon {
            font-size: 30px;
            color: var(--color-white-10);
          }
          .upload-des {
            display: inline-block;
            color: var(--color-white-10);
            width: 100%;
            text-align: center;
            @include text-overflow-ellipsis;
          }
          .upload-content-item-close {
            position: absolute;
            top: -8px;
            right: -8px;
            color: var(--color-white-10);
            font-size: 10px;
            width: 20px;
            height:20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            background-color: red;
          }
        }
      }
    }
  }
  &::v-deep .el-upload-list > .el-upload-list__item.is-success {
    display: none;
  }
}
.btn-groups {
  margin-top: 20px;
  text-align: center;
  .btn {
    margin: 0 20px;
  }
}
</style>